<template>
  <div class="duty-schedule-container">
    <!-- 页面头部区域 -->
    <div class="schedule-header">
      <div class="header-content">
        <div class="ancient-title">值班排班系统</div>
        <div class="header-subtitle">阴曹地府 · 仙官值班管理中心</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">📅</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 路由信息显示 -->
    <div class="route-info">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/management">
            <ApartmentOutlined />
            机构管理
          </router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <ScheduleOutlined />
          {{ $route.meta.title }}
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 核心统计卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card primary-stat">
            <div class="stat-icon">
              <UserOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">今日值班</div>
              <div class="stat-value">{{ scheduleStats.todayOnDuty }}</div>
              <div class="stat-label">仙官在岗</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card judgment-stat">
            <div class="stat-icon">
              <CalendarOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">排班完成</div>
              <div class="stat-value">{{ scheduleStats.scheduleCompletion }}%</div>
              <div class="stat-label">本月</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card pending-stat">
            <div class="stat-icon">
              <AlertOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">紧急调班</div>
              <div class="stat-value">{{ scheduleStats.emergencyShifts }}</div>
              <div class="stat-label">本周</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card online-stat">
            <div class="stat-icon">
              <ClockCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">出勤率</div>
              <div class="stat-value">{{ scheduleStats.attendanceRate }}%</div>
              <div class="stat-label">本月平均</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 功能模块导航 -->
    <div class="modules-section">
      <h3 class="section-title">
        <ScheduleOutlined class="section-icon" />
        排班管理功能
      </h3>

      <a-row :gutter="[24, 24]" class="modules-grid">
        <!-- 值班时间安排 -->
        <a-col :xs="24" :lg="12">
          <div class="module-card" @click="navigateToModule('/management/duty-schedule/time-arrangement')">
            <div class="module-header">
              <div class="module-icon">
                <ClockCircleOutlined />
              </div>
              <div class="module-title">值班时间安排</div>
            </div>
            <div class="module-description">管理各殿堂的值班时间规划，设置值班班次和时间分配</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">排班周期：</span>
                <span class="stat-value">{{ moduleStats.timeArrangement.cycles }}种</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">覆盖率：</span>
                <span class="stat-value">{{ moduleStats.timeArrangement.coverage }}%</span>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 值班人员分配 -->
        <a-col :xs="24" :lg="12">
          <div class="module-card" @click="navigateToModule('/management/duty-schedule/personnel-allocation')">
            <div class="module-header">
              <div class="module-icon">
                <UserOutlined />
              </div>
              <div class="module-title">值班人员分配</div>
            </div>
            <div class="module-description">合理分配各部门仙官的值班任务，确保人力资源的有效利用</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">值班人员：</span>
                <span class="stat-value">{{ moduleStats.personnelAllocation.totalPersonnel }}人</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">负载均衡：</span>
                <span class="stat-value">{{ moduleStats.personnelAllocation.loadBalance }}%</span>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 值班记录管理 -->
        <a-col :xs="24" :lg="12">
          <div class="module-card" @click="navigateToModule('/management/duty-schedule/record-management')">
            <div class="module-header">
              <div class="module-icon">
                <FileTextOutlined />
              </div>
              <div class="module-title">值班记录管理</div>
            </div>
            <div class="module-description">记录和管理仙官值班情况，统计出勤率和工作表现</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">本月记录：</span>
                <span class="stat-value">{{ moduleStats.recordManagement.monthlyRecords }}条</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">异常记录：</span>
                <span class="stat-value">{{ moduleStats.recordManagement.abnormalRecords }}条</span>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 紧急调班处理 -->
        <a-col :xs="24" :lg="12">
          <div class="module-card" @click="navigateToModule('/management/duty-schedule/emergency-shift')">
            <div class="module-header">
              <div class="module-icon">
                <AlertOutlined />
              </div>
              <div class="module-title">紧急调班处理</div>
            </div>
            <div class="module-description">处理突发情况下的紧急调班需求，确保值班连续性</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">紧急调班：</span>
                <span class="stat-value">{{ moduleStats.emergencyShift.emergencyCases }}次</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">响应时间：</span>
                <span class="stat-value">{{ moduleStats.emergencyShift.responseTime }}分钟</span>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 今日值班概览 -->
    <div class="today-overview-section">
      <h3 class="section-title">
        <CalendarOutlined class="section-icon" />
        今日值班概览
      </h3>

      <div class="today-schedule">
        <a-row :gutter="[16, 16]">
          <a-col :xs="24" :md="12" :lg="8" v-for="department in todaySchedule" :key="department.id">
            <div class="dept-schedule-card">
              <div class="dept-header">
                <div class="dept-icon">
                  <BankOutlined />
                </div>
                <div class="dept-info">
                  <h4 class="dept-name">{{ department.name }}</h4>
                  <p class="dept-status">{{ getDepartmentStatus(department.currentShift) }}</p>
                </div>
                <div class="shift-indicator">
                  <a-badge :status="getShiftStatus(department.currentShift)" :text="getShiftText(department.currentShift)" />
                </div>
              </div>

              <div class="duty-personnel">
                <h5>当前值班</h5>
                <div class="personnel-list">
                  <div v-for="person in department.currentPersonnel" :key="person.id" class="person-item">
                    <a-avatar :src="person.avatar" size="small">
                      {{ person.name.charAt(0) }}
                    </a-avatar>
                    <span class="person-name">{{ person.name }}</span>
                    <span class="person-role">{{ person.role }}</span>
                  </div>
                </div>
              </div>

              <div class="next-shift">
                <div class="next-info">
                  <span class="next-label">下班时间：</span>
                  <span class="next-time">{{ department.nextShiftTime }}</span>
                </div>
                <div class="next-personnel">
                  <span class="next-label">接班人员：</span>
                  <span class="next-names">{{ department.nextPersonnel.map((p) => p.name).join('、') }}</span>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>

    <!-- 最近排班动态 -->
    <div class="schedule-dynamics-section">
      <h3 class="section-title">
        <NotificationOutlined class="section-icon" />
        最近排班动态
      </h3>

      <div class="dynamics-list">
        <a-list
          :data-source="scheduleDynamics"
          :pagination="{
            pageSize: 5,
            showSizeChanger: false
          }"
        >
          <template #renderItem="{ item }">
            <a-list-item>
              <a-list-item-meta>
                <template #avatar>
                  <a-avatar :style="{ backgroundColor: item.avatarColor }" size="large">
                    <component :is="item.icon" />
                  </a-avatar>
                </template>
                <template #title>
                  <span class="dynamics-title">{{ item.title }}</span>
                  <a-tag :color="item.tagColor" size="small" style="margin-left: 8px">{{ item.type }}</a-tag>
                </template>
                <template #description>
                  <div class="dynamics-description">{{ item.description }}</div>
                  <div class="dynamics-meta">
                    <span class="dynamics-time">{{ item.time }}</span>
                    <span class="dynamics-department">{{ item.department }}</span>
                  </div>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { HomeOutlined, ApartmentOutlined, ScheduleOutlined, UserOutlined, CalendarOutlined, AlertOutlined, ClockCircleOutlined, FileTextOutlined, BankOutlined, NotificationOutlined } from '@ant-design/icons-vue'

const router = useRouter()

// 排班统计信息
const scheduleStats = reactive({
  todayOnDuty: 45,
  scheduleCompletion: 95,
  emergencyShifts: 3,
  attendanceRate: 98
})

// 模块统计信息
const moduleStats = reactive({
  timeArrangement: {
    cycles: 3,
    coverage: 100
  },
  personnelAllocation: {
    totalPersonnel: 856,
    loadBalance: 92
  },
  recordManagement: {
    monthlyRecords: 2580,
    abnormalRecords: 12
  },
  emergencyShift: {
    emergencyCases: 8,
    responseTime: 15
  }
})

// 今日值班安排
const todaySchedule = ref([
  {
    id: 1,
    name: '第一殿秦广王府',
    currentShift: 'day',
    currentPersonnel: [
      { id: 1, name: '秦广王', role: '主审', avatar: '' },
      { id: 2, name: '判官李明', role: '副审', avatar: '' },
      { id: 3, name: '文书张华', role: '书记官', avatar: '' }
    ],
    nextShiftTime: '18:00',
    nextPersonnel: [
      { id: 4, name: '夜班主审', role: '主审' },
      { id: 5, name: '夜班副审', role: '副审' }
    ]
  },
  {
    id: 2,
    name: '第二殿楚江王府',
    currentShift: 'day',
    currentPersonnel: [
      { id: 6, name: '楚江王', role: '主审', avatar: '' },
      { id: 7, name: '判官王五', role: '副审', avatar: '' }
    ],
    nextShiftTime: '18:00',
    nextPersonnel: [{ id: 8, name: '夜班主审', role: '主审' }]
  },
  {
    id: 5,
    name: '第五殿阎罗王府',
    currentShift: 'day',
    currentPersonnel: [
      { id: 9, name: '阎罗王', role: '总管', avatar: '' },
      { id: 10, name: '黑白无常', role: '执法', avatar: '' },
      { id: 11, name: '牛头马面', role: '巡查', avatar: '' }
    ],
    nextShiftTime: '20:00',
    nextPersonnel: [
      { id: 12, name: '夜班总管', role: '总管' },
      { id: 13, name: '夜班执法', role: '执法' }
    ]
  },
  {
    id: 10,
    name: '第十殿转轮王府',
    currentShift: 'day',
    currentPersonnel: [
      { id: 14, name: '转轮王', role: '转世主管', avatar: '' },
      { id: 15, name: '孟婆', role: '汤药官', avatar: '' },
      { id: 16, name: '奈何桥守', role: '桥梁官', avatar: '' }
    ],
    nextShiftTime: '24:00',
    nextPersonnel: [{ id: 17, name: '夜班主管', role: '转世主管' }]
  }
])

// 最近排班动态
const scheduleDynamics = ref([
  {
    id: 1,
    title: '第三殿紧急调班完成',
    description: '因宋帝王临时公务，紧急调整值班安排，由副王代班',
    type: '紧急调班',
    time: '1小时前',
    department: '第三殿宋帝王府',
    icon: 'AlertOutlined',
    avatarColor: '#fa8c16',
    tagColor: 'orange'
  },
  {
    id: 2,
    title: '下周排班计划发布',
    description: '下周（11月20日-11月26日）的值班排班计划已发布，请各殿查收',
    type: '排班发布',
    time: '3小时前',
    department: '人事司',
    icon: 'CalendarOutlined',
    avatarColor: '#1890ff',
    tagColor: 'blue'
  },
  {
    id: 3,
    title: '第七殿值班记录异常',
    description: '第七殿泰山王府昨日值班记录存在时间重叠，需要核实',
    type: '记录异常',
    time: '5小时前',
    department: '第七殿泰山王府',
    icon: 'FileTextOutlined',
    avatarColor: '#f5222d',
    tagColor: 'red'
  },
  {
    id: 4,
    title: '新值班制度培训',
    description: '针对新入职仙官的值班制度培训将于明日举行',
    type: '培训通知',
    time: '1天前',
    department: '培训司',
    icon: 'UserOutlined',
    avatarColor: '#52c41a',
    tagColor: 'green'
  },
  {
    id: 5,
    title: '值班效率提升',
    description: '本月各殿值班效率较上月提升15%，表现优异',
    type: '效率统计',
    time: '2天前',
    department: '统计司',
    icon: 'ClockCircleOutlined',
    avatarColor: '#722ed1',
    tagColor: 'purple'
  }
])

// 方法
const getDepartmentStatus = (shift) => {
  const statusMap = {
    day: '日班值守',
    night: '夜班值守',
    emergency: '紧急值班'
  }
  return statusMap[shift] || '正常值班'
}

const getShiftStatus = (shift) => {
  const statusMap = {
    day: 'processing',
    night: 'default',
    emergency: 'error'
  }
  return statusMap[shift] || 'default'
}

const getShiftText = (shift) => {
  const textMap = {
    day: '日班',
    night: '夜班',
    emergency: '紧急'
  }
  return textMap[shift] || '值班'
}

// 导航到指定模块
const navigateToModule = (path) => {
  router.push(path)
}
</script>

<style lang="scss" scoped>
.duty-schedule-container {
  padding: 24px;

  // 页面头部
  .schedule-header {
    text-align: center;
    margin-bottom: 32px;

    .header-content {
      .ancient-title {
        font-size: 32px;
        font-weight: bold;
        color: $secondary-color;
        margin-bottom: 8px;
        text-shadow: 0 0 20px rgba(212, 153, 10, 0.3);
      }

      .header-subtitle {
        font-size: 16px;
        color: $text-secondary;
        letter-spacing: 2px;
      }
    }

    .header-decoration {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24px;
      gap: 16px;

      .decoration-line {
        width: 80px;
        height: 1px;
        background: linear-gradient(90deg, transparent, $secondary-color, transparent);
      }

      .decoration-symbol {
        font-size: 20px;
        color: $secondary-color;
        font-weight: bold;
      }
    }
  }

  // 路由信息
  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  // 统计卡片区域
  .stats-section {
    margin-bottom: 32px;

    .stat-card {
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 16px;

      .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
      }

      .stat-content {
        flex: 1;

        .stat-title {
          font-size: 14px;
          color: $text-secondary;
          margin-bottom: 4px;
        }

        .stat-value {
          font-size: 28px;
          font-weight: bold;
          color: $primary-color;
          margin-bottom: 4px;
        }

        .stat-label {
          font-size: 12px;
          color: $text-secondary;
        }
      }

      &.primary-stat .stat-icon {
        background: linear-gradient(135deg, #1890ff, #40a9ff);
      }

      &.judgment-stat .stat-icon {
        background: linear-gradient(135deg, #52c41a, #73d13d);
      }

      &.pending-stat .stat-icon {
        background: linear-gradient(135deg, #fa8c16, #ffa940);
      }

      &.online-stat .stat-icon {
        background: linear-gradient(135deg, #722ed1, #9254de);
      }
    }
  }

  // 模块导航区域
  .modules-section {
    margin-bottom: 32px;

    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: $secondary-color;
      }
    }

    .module-card {
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      transition: all 0.3s ease;
      cursor: pointer;
      height: 100%;

      .module-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;

        .module-icon {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          background: linear-gradient(135deg, $secondary-color, #f0c674);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          color: white;
        }

        .module-title {
          font-size: 18px;
          font-weight: bold;
          color: $primary-color;
        }
      }

      .module-description {
        color: $text-secondary;
        line-height: 1.6;
        margin-bottom: 20px;
      }

      .module-stats {
        padding-top: 16px;
        border-top: 1px solid rgba(212, 153, 10, 0.2);

        .stat-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;

          .stat-label {
            color: $text-secondary;
            font-size: 14px;
          }

          .stat-value {
            color: $secondary-color;
            font-weight: bold;
            font-size: 14px;
          }
        }
      }
    }
  }

  // 今日值班概览
  .today-overview-section {
    margin-bottom: 32px;

    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: $secondary-color;
      }
    }

    .today-schedule {
      .dept-schedule-card {
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(212, 153, 10, 0.2);
        height: 100%;

        .dept-header {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 16px;

          .dept-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, $secondary-color, #f0c674);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: white;
          }

          .dept-info {
            flex: 1;

            .dept-name {
              margin: 0 0 4px 0;
              color: $primary-color;
              font-size: 16px;
              font-weight: bold;
            }

            .dept-status {
              margin: 0;
              color: $text-secondary;
              font-size: 14px;
            }
          }

          .shift-indicator {
            text-align: right;
          }
        }

        .duty-personnel {
          margin-bottom: 16px;

          h5 {
            margin: 0 0 12px 0;
            color: $primary-color;
            font-size: 14px;
            font-weight: bold;
          }

          .personnel-list {
            .person-item {
              display: flex;
              align-items: center;
              gap: 8px;
              margin-bottom: 8px;

              .person-name {
                font-size: 14px;
                color: $text-primary;
                font-weight: 500;
              }

              .person-role {
                font-size: 12px;
                color: $text-secondary;
              }
            }
          }
        }

        .next-shift {
          padding-top: 16px;
          border-top: 1px solid rgba(212, 153, 10, 0.2);

          .next-info,
          .next-personnel {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;

            .next-label {
              color: $text-secondary;
              font-size: 14px;
            }

            .next-time,
            .next-names {
              color: $secondary-color;
              font-size: 14px;
              font-weight: 500;
            }
          }
        }
      }
    }
  }

  // 排班动态区域
  .schedule-dynamics-section {
    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: $secondary-color;
      }
    }

    .dynamics-list {
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);

      .dynamics-title {
        font-weight: bold;
        color: $primary-color;
        font-size: 16px;
      }

      .dynamics-description {
        color: $text-primary;
        line-height: 1.5;
        margin-bottom: 8px;
      }

      .dynamics-meta {
        display: flex;
        gap: 16px;

        .dynamics-time {
          color: $text-secondary;
          font-size: 14px;
        }

        .dynamics-department {
          color: $text-secondary;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
